<template>
	<view class="body">
		<!-- 顶部的事件名称+事件描述 -->
		<view class="titleAndDescripton">
			<list-button class="listbutton" :aimid="Number(obj.id)" :currectpage="1"></list-button>
			<text class="title">{{obj.name}}</text>
			<text class="description">{{obj.description}}</text>
		</view>
		<!-- 相关属性表格 -->
		<view class="propertyList">
			<!-- 起始日期 -->
			<view class="propertyItem">
				<view class="nameAndIcon">
					<image src="../../static/rili-2.png" mode="aspectFit" class="icon" />
					<text class="name">起始日期</text>
				</view>
				<text class="propertyDetail">{{obj.begin}}</text>
			</view>
			<!-- 终止日期 -->
			<view class="propertyItem">
				<view class="nameAndIcon">
					<image src="../../static/gongzuojihua.png" mode="aspectFit" class="icon" />
					<text class="name">终止日期</text>
				</view>
				<text class="propertyDetail">{{obj.end}}</text>
			</view>
			
			<view class="propertyItem">
				<view class="nameAndIcon">
					<image src="../../static/shijian-2.png" mode="aspectFit" class="icon" />
					<text class="name">剩余天数</text>
				</view>
				<text class="propertyDetail">{{obj.remainingDays}}天</text>
			</view>
			
			<view class="propertyItem">
				<view class="nameAndIcon">
					<image src="../../static/qushi-2.png" mode="aspectFit" class="icon" />
					<text class="name">事件标签</text>
				</view>
				<view class="propertyDetail">
					<text class="texticon" @click="labelDetail(obj.label)">{{truncateText(obj.label,5)}}</text>
					<button class="iconButton" @click="showPrompt()">
						<image src="../../static/tianjia-2.png" class="iconin"/>
					</button>
				</view>
			</view>
		</view>
		<!-- 流程完成度 -->
		<view class="ProcessBox">
			<view class="processItem">
				<text>时间</text>
				<view class="process">
					<progress :percent="obj.timeRate" show-info />
				</view>
			</view>
		</view>
		<!-- 添加步骤按钮 -->
		<button class="button" @click="goToAddStep()"><text>添加步骤</text></button>
		<view v-for="(item,index) in stepsData" :key=item.id style="width: 100%;">
			<collect-item 
			:content="item.description" 
			:form="item.date" 
			:mid="item.id"
			@delete="stepsData.splice(index,1)"></collect-item>
		</view>
	</view>
</template>

<script setup>
import {onLoad,onShow} from "@dcloudio/uni-app";
import { ref } from "vue";
import db from "../../util/db";
import mydate from "../../util/mydate";
const stepsData = ref();
const obj = ref({id:0,});
const display = ref(0);
// 详细的标签内容
function labelDetail(label){
	plus.nativeUI.alert(`${label}`, "nativeUI", "标签详细");
}
// 弹出输入对话框
function showPrompt(){
	let label = null;
	let index = null;
	plus.nativeUI.prompt("Input new label: ",async function(e){
		label = e.value;
		index = e.index;
		console.log(e.index,label);
		if(index == 0 && label.length>0)
		{
			label = label.replace(/[\n\t]/g, '');
			await db.openDatabase();
			await db.addLabel(obj.value.id,label);
			await db.closeDatabase();
			if(obj.value.label == null)
			{
				obj.value.label = "";
			}
			obj.value.label += label+",";
		}
	}, "标签添加", "新标签内容", ["确定","取消"]);
}
// 控制长度
function truncateText(text, maxLength) {
    if (text!= undefined && text.length > maxLength) {
        return text.substring(0, maxLength) + '...'; // 添加省略号或其他标记
    }
    return text;
}
onLoad((e)=>{
	console.log(e.id);
	// 获取由路由传递过来的数据
	obj.value.id = e.id;
	display.value = 0;
})
onShow(async()=>{
	await db.openDatabase();
	console.log("id数据为",obj.value);
	// 向数据库中请求数据
	const cobj = await db.selectOneEvent(obj.value.id);
	obj.value = cobj[0];
	console.log(obj.value.id);
	stepsData.value = await db.selectStep(obj.value.id);
	stepsData.value.reverse()
	console.log("向steps数据库中请求数据");
	console.log(stepsData.value);
	console.log("触发onshow");
	db.closeDatabase();
	obj.value.remainingDays = mydate.RemianingDaysComputed(obj.value.begin,obj.value.end);
	obj.value.timeRate = mydate.durationRateComputed(obj.value.begin,obj.value.end);
	
})
function goToAddStep()
{
	console.log("转移传递参数为",obj.value.id)
	// 转移同时传递ID参数
	uni.navigateTo({
		url:`/pages/addStep/addStep?id=${obj.value.id}`,
	});
}

</script>

<style lang="scss" scoped>
.propertyDetailicon{
	flex: 1;
	flex-direction: row;
	display: flex;
	align-items: center;
	font-size: 40rpx;
	font-weight: 400;
	letter-spacing: 0.28rpx;
	line-height: 48rpx;
	color: rgba(4, 6, 15, 1);
	text-align: left;
}
.texticon
{
	display: block;
}
.iconButton{
	width: 40rpx;
	height: 40rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	.iconin{
		display: flex;
		width: 30rpx;
		height: 30rpx;
	}
}
.ProcessBox{
	margin-left: 50rpx;
	margin-top: 15rpx;
	width: 640rpx;
	height: 100rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	.processItem{
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 100%;
		.process{
			padding-left: 5%;
			width: 80%;
		}
	}
}

.icon{
	width: 50rpx;
	height: 50rpx;
	margin-right: 10rpx;
}
.body{
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.listbutton{
	position: relative;
	left: 40%;
	top: 0%;
}
.titleAndDescripton{
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 40rpx;
	margin-bottom: 20rpx;
	width: 640rpx;
	height: 200rpx;
	position: relative; 
	.title{
		display: block;
		font-size: 56rpx;
		font-weight: 500;
		letter-spacing: 0.56rpx;
		color: rgba(4, 6, 15, 1);
		text-align: left;
		vertical-align: top;
		margin-bottom: 10rpx;
	}
	.description{
		margin-top: 10rpx;
		font-size: 28rpx;
		font-weight: 400;
		letter-spacing: 0.28rpx;
		line-height: 48rpx;
		color: rgba(98, 104, 121, 1);
		text-align: left;
		vertical-align: top;
	}
}
.propertyList{
	width: 640rpx;
	height: 300rpx;
	opacity: 1;
	margin-top: 25rpx;
	margin-bottom: 25rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-left:70rpx;
	.propertyItem{
		height: 50rpx;
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: 25rpx;
		.nameAndIcon{
			flex: 1;
			display: flex;
			flex-direction: row;
			align-items: center;
			.name{
				font-size: 35rpx;
				font-weight: 400;
				letter-spacing: 1.5rpx;
				color: rgba(98, 104, 121, 1);
				text-align: left;
				margin-left: 20rpx;
			}
		}
		.propertyDetail{
			flex: 1;
			flex-direction: row;
			display: flex;
			align-items: center;
			font-size: 40rpx;
			font-weight: 400;
			letter-spacing: 0.28rpx;
			line-height: 48rpx;
			color: rgba(4, 6, 15, 1);
			text-align: left;
		}
	}
}
.button{
	width: 630rpx;
	height: 104rpx;
	opacity: 1;
	border-radius: 200rpx;
	background: rgba(255, 255, 255, 1);
	border: 2rpx solid rgba(231, 235, 243, 1);
	display: flex;
	align-items: center;
	justify-content: center;
	text{
		font-size: 32rpx;
		font-weight: 500;
		letter-spacing: 0.32rpx;
		line-height: 52rpx;
		color: rgba(4, 6, 15, 1);
		text-align: center;
	}
}
</style>
